<template>
  <div class="grid-container">
    <div v-for="(item, index) in userStore.$state.items" :key="index">
      <van-grid :border="false" column-num="2" round padding="10px" class="grid" :style="{ 'background-color': '#f5f5f5', 'box-shadow': '0 2px 4px rgba(0, 0, 0, 0.1)' }">
        <van-grid-item v-for="(i, v) in item.children" :key="v" :style="{ width: '50%' }">
          <van-image class="van-image" @click="tup(i)" :src="i.img" fit="cover" />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script setup lang="ts">
// @ts-ignore
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCounterStore } from '../../store/counter';
const userStore = useCounterStore();
console.log(userStore.$state.items);
// @ts-ignore
const active = ref(0);
const router = useRouter();
// 跳转到视频播放页面
// @ts-ignore
const tup = (i) => {
  console.log(i, "dfcgvhjkl");
  router.push({ path: "/shipin", query: i });
};
</script>
<style lang="scss" scoped>
.grid-container {
  // 可根据实际需求设置容器的其他样式，如外边距等
  margin: 0.1rem;
  background: none;
}
.grid {
  // 这里可以对van-grid组件的样式做进一步微调，比如调整内部元素的对齐方式等
  display: flex;
  flex-wrap: wrap;
  padding: 0.1rem;
}
.van-image{
  width: 1.5rem;
  height: 3rem;
  padding: 0.1rem;
}
</style>